<template>
    <div class="right">
        <div class="right-top">
            <span>医生管理</span>
            <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u178.svg" alt="">
            <span>调动申请</span>
        </div>
        <div class="contents">
            <RightTop></RightTop>
            <div class="view">
                <div class="day">
                    <div class="days">
                        <div class="block">
                            <el-date-picker
                                v-model="value1"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </div>
                        
                    </div>
                    <div class="search">
                        <img src="https://cdn7.axureshop.com/demo2024/2281499/images/%E5%85%A8%E9%83%A8%E5%8C%BB%E7%94%9F/u251.svg" alt="">
                        <input type="text" placeholder="搜索医生名称">
                    </div>
                </div>
                <ul>
                    <li class="total">
                        <p class="serial">序号</p>
                        <p class="names">姓名</p>
                        <p class="names">联系电话</p>
                        <p class="names">调出单位</p>
                        <p class="names">调入单位</p>
                        <p class="names">申请日期</p>
                        <p class="reason">申请原因</p>
                        <p class="operate">操作</p>
                    </li>
                    <li v-for="n in 10" :key="n">
                        <p class="serial">{{n}}</p>
                        <p class="names">刘备</p>
                        <p class="names">13314046783</p>
                        <p class="names">郑州科技学院</p>
                        <p class="names">中科院</p>
                        <p class="names">2024.11.21</p>
                        <p class="reason">学历达标</p>
                        <p class="operate">已办</p>
                    </li>
                </ul>
                <div class="page">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="1000">
                    </el-pagination>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import RightTop from './RightTop.vue';
  export default {
    components:{
        RightTop
    },
    data() {
      return {
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      };
    }
  };
</script>
<style scoped>
    .days>>>input{
        height: 32px;
    }
    .days>>>.el-input__icon{
        line-height: 32px;
    }
    .page{
        width: auto;
        height: 30px;
        text-align: right;
        margin-top: 80px;
    }

</style>
<style lang="scss" scoped>
.right{
    width: 100%;
    height: 874px;
    padding: 0 12px;
    box-sizing: border-box;
    .right-top{
        height: 44px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        span{
            height: 44px;
            line-height: 44px;
            font-size: 14px;
            color: #333;
        }
        span:nth-of-type(1){
            color: #8c8c8c;
        }
        img{
            width: 7px;
            height: 14px;
            margin: 0 5px;
        }
    }
    .contents{
        width: 100%;
        height: 820px;
        background-color: #fff;
        border-radius: 4px;
        
        .view{
            width: 100%;
            height: 770px;
            padding: 0 15px;
            box-sizing: border-box;
            .day{
                width: 100%;
                height: 80px;
                display: flex;
                align-items: center;
                .days{
                    width: 128px;
                    height: 32px;
                    line-height: 32px;
                    .el-date-editor.el-input, .el-date-editor.el-input__inner{
                        width: 128px;
                        height: 32px;
                    }
                }
                .search{
                    height: 30px;
                    width: 200px;
                    padding: 0 15px 0 32px;
                    font-size: 14px;
                    color: #e8dbdb;
                    border: 1px solid #e8dbdb;
                    line-height: 30px;
                    // box-sizing: border-box;
                    border-radius: 4px;
                    position: relative;
                    margin-left: 15px;
                    img{
                        width: 14px;
                        height: 14px;
                        position: absolute;
                        top: 6.5px;
                        left: 10px;
                    }
                    input{
                        width: 100%;
                        height: 28px;
                        border: none;
                        outline: none;
                        color: #e8dbdb;
                    }
                }
            }
            ul{
                list-style: none;
                li{
                    height: 40px;
                    display: flex;
                    border-bottom: 1px solid #ccc;
                    p{
                        display: inline-block;
                        line-height: 40px;
                        text-align: center;
                        font-size: 13px;
                        color: #333;
                    }
                    .serial{
                        width: 40px;
                    }
                    .names{
                        width: 200px;
                    }
                    .reason{
                        width: 396px;
                    }
                    .operate{
                        width: 200px;
                    }
                }
                .total{
                    height: 40px;
                    display: flex;
                    background-color: #ccc;
                }
            }
            
        }
        
    }
}
</style>